<template>
  <div class="root">
    <m-header :title="user.nickname" yellowbg>
      <div slot="left" v-on:click="$router.go(-1)"><img class="m-icon-img margin-right-10" src="../assets/images/menu_back.png" /></div>
      <div slot="right"><img class="m-icon-img margin-right-10" src="../assets/images/menu_more.png" /></div>
    </m-header>

    <div class="content">

      <div class="user-info">
        <div>
          <img class="user-info-avatar" :src="user.avatarUrl ? user.avatarUrl : defaultAvatar" alt="">
        </div>
        <div class="user-info-name">
          <div class="name"> {{user.nickname}}</div>
          <mu-badge :color="user.gender == 1 ? '#3cb2e2' : '#f878a8'" :content="genderStr" />
          <div class="score">
            <img class="small-star" src="../assets/images/small_star.png" alt="">
            <div>
              {{ user.score }}
            </div>
          </div>
        </div>

        <div class="user-info-data">
          <div class="user-info-data-left">

            <div>
              <span class="button" @click="follow">
                  {{followStr}}
             </span>
            </div>

            <div class="user-info-data-amount">
              粉丝数: {{user.fansCount}}
            </div>
          </div>

          <div class="user-info-data-right">
            <div>
              <span class="button" @click="makeEvaluation"> 去评价 </span>
            </div>
            <div class="user-info-data-amount">
              搭讪消费: ￥ {{user.friendFund}}
            </div>
          </div>
        </div>
      </div>

      <div class="user-info-list">

        <div class="user-info-list-item2" @click="confirmPurchase('secretSignal')">
          <div class="user-info-list-item2-title-icon">
            <div class="user-info-list-item2-title">
              搭讪暗号
            </div>

            <div class="user-info-list-item2-secret-icon" v-show="user.secretSignalPrice != 0">
              <img class="moreIcon" src="../assets/images/secret_icon.png" />
              <img class="moreIcon" src="../assets/images/more_icon.png" />
            </div>
          </div>
          <div class="user-info-list-item2-data" v-show="user.secretSignalPrice == 0">
            <!--床前明月光，疑是地上霜。床前明月光，疑是地上霜。床前明月光，疑是地上霜。-->
            {{user.secretSignal}}
          </div>
        </div>

        <div class="user-info-list-item2" @click="confirmPurchase('likeType')">

          <div class="user-info-list-item2-title-icon">
            <div class="user-info-list-item2-title">
              喜欢的类型
            </div>

            <div class="user-info-list-item2-secret-icon" v-show="user.likeTypePrice != 0">
              <img class="moreIcon" src="../assets/images/secret_icon.png" />
              <img class="moreIcon" src="../assets/images/more_icon.png" />
            </div>
          </div>

          <div class="user-info-list-item2-data" v-show="user.likeTypePrice == 0">
            <!--床前明月光，疑是地上霜。床前明月光，疑是地上霜。-->
            {{user.likeType}}
          </div>

        </div>

        <div class="user-info-list-item2" @click="confirmPurchase('usuallyArea')">

          <div class="user-info-list-item2-title-icon">
            <div class="user-info-list-item2-title">
              常去的地方
            </div>

            <div class="user-info-list-item2-secret-icon" v-show="user.usuallyAreaPrice != 0">
              <img class="moreIcon" src="../assets/images/secret_icon.png" />
              <img class="moreIcon" src="../assets/images/more_icon.png" />
            </div>
          </div>

          <div class="user-info-list-item2-data" v-show="user.usuallyAreaPrice == 0">
            <!--床前明月光，疑是地上霜。床前明月光，疑是地上霜。-->
            {{user.usuallyArea}}
          </div>

        </div>

        <div class="user-info-list-item2" @click="confirmPurchase('selfAvatar')">
          <div class="user-info-list-item2-title-icon">
            <div class="user-info-list-item2-title">
              最美自拍
            </div>
            <div class="user-info-list-item2-secret-icon" v-show="user.selfAvatarPrice !== 0">
              <img class="moreIcon" src="../assets/images/secret_icon.png" />
              <img class="moreIcon" src="../assets/images/more_icon.png" />
            </div>
          </div>
          <div class="user-info-list-item2-data" v-show="user.selfAvatarPrice === 0">
            <!--床前明月光，疑是地上霜。床前明月光，疑是地上霜。-->
            <div class="selfie-list">
              <div class="selfie-warp" v-for="item in user.avatarList" v-bind:style="{backgroundImage: 'url(' + item.avatar + ')'}" @click="viewImage(item.avatar)">
                <!--<img class="avatar" v-for="item in photoList" :src="item.avatar" />-->
              </div>
            </div>
          </div>

        </div>

        <div class="user-info-list-item2">
          <div class="user-info-list-item2-label">
            个性签名
          </div>

          <div class="user-info-list-item2-data">
            {{user.description == null ? '这位童鞋比较懒，什么都没写~' : user.description}}
          </div>
        </div>

        <div class="user-info-list-item2">
          <div class="user-info-list-item2-label">
            兴趣标签
          </div>

          <div class="user-info-list-item2-data">
            <mu-badge class="tag-item-margin" v-for="(tag,index) in user.tagList" :primary="index%2===0" :secondary="index%2===1" :content="tag.content"
              :key="index" />
          </div>
        </div>

        <mu-dialog :open="purchaseConfirmDialog" @close="closeDialog">
          观看这项资料需要花费{{purchasePrice}}元，确定要消费吗？
          <mu-flat-button slot="actions" primary @click="closeDialog" label="取消" />
          <mu-flat-button slot="actions" primary @click="purchaseInfo" label="确定" />
        </mu-dialog>

      </div>
    </div>
  </div>
</template>

<script>
  import defaultAvatar from '../assets/images/default_avatar.png'
  import mHeader from '../components/header'
  import util from '../util/util.js'

  import {
    mapState
  } from 'vuex'
  export default {
    name: 'userinformation',
    components: {
      mHeader
    },
    data() {
      return {
        defaultAvatar,
        purchasePrice: 0,
        purchaseType: '',
        purchaseConfirmDialog: false,
        user: {}
      }
    },
    computed: {
      genderStr: function () {
        if (this.user.gender === 1) {
          return '男';
        } else if (this.user.gender === 0) {
          return '女';
        } else {
          return '未知';
        }
      },
      followStr() {
        return this.user.isFollow === 1 ? '取消关注' : '关注';
      },

      isPaid(type) {
        switch (type) {
          case 'secretSignal':
            return this.user.secretSignalPrice === 0;
            break;
        }
      }
    },
    methods: {
      viewImage(_url) {
        this.$router.push({
          name: 'ViewImage',
          query: {
            imgUrl: _url,
          }
        });
      },

      makeEvaluation() {
        var _accountId = this.$route.params.accountId;
        this.$router.push({
          name: 'MakeEvaluation',
          params: {
            accountId: _accountId,
          }
        });
      },

      getUserInfo() {
        var _this = this;
        var accountId = this.$route.params.accountId;
        console.log(accountId);

        this.$http.get('user/' + accountId).then(
          function (response) {
            if (response.data.code === '0') {
              _this.user = response.data.data.user;
            }
          }
        ).catch(function (error) {

        });
      },

      follow() {
        var hasFollow = (this.user.isFollow === 1)

        var method = (hasFollow ? 'delete' : 'post');
        var _this = this;

        this.$http({
          method: method,
          url: 'follow/user/' + _this.user.accountId,
        }).then(
          function (response) {
            util.toast(response.data.msg);
            if (response.data.code === '0') {
              _this.user.isFollow = hasFollow ? 0 : 1; //取反
            }
          }
        );
      },

      confirmPurchase(type) {
        var _user = this.user;
        switch (type) {
          case 'secretSignal':
            if (_user.secretSignalPrice === 0) return;
            this.purchasePrice = _user.secretSignalPrice;
            break;

          case 'likeType':
            if (_user.likeTypePrice === 0) return;
            this.purchasePrice = _user.likeTypePrice;
            break;

          case 'usuallyArea':
            if (_user.usuallyAreaPrice === 0) return;
            this.purchasePrice = _user.usuallyAreaPrice;
            break;

          case 'selfAvatar':
            if (_user.selfAvatarPrice === 0) return;
            this.purchasePrice = _user.selfAvatarPrice;
            break;
        }
        this.purchaseType = type;
        this.purchaseConfirmDialog = true;
      },

      purchaseInfo() {
        var _this = this;

        this.$http.post('order', {
          accountId: _this.user.accountId,
          price: _this.purchasePrice,
          type: _this.getOrderType()
        }).then(
          function (response) {
            if (response.data.code === '0') {
              console.log('creat order success');
              _this.pay(response.data.data.sn);
            }
          }
        ).catch(
          function (error) {
            _this.closeDialog()
          }
        );
      },

      pay(orderId) {
        var _this = this;
        console.log('pay');
        this.$http.post('order/' + orderId + '/balance', {})
          .then(
            function (response) {
              if (response.data.code === '0') {
                util.toast('购买成功');
                // _this.unlockInfo();
                _this.user = response.data.data.user;
              }
              _this.closeDialog()
            }
          ).catch(
            function (error) {
              _this.closeDialog()
            }
          );
      },

      unlockInfo() {
        var _user = this.user;
        console.log('unlockInfo');
        console.log(this.purchaseType);

        switch (this.purchaseType) {
          case 'secretSignal':
            _user.secretSignalPrice = 0;
            break;
          case 'likeType':
            _user.likeTypePrice = 0;
            break;
          case 'usuallyArea':
            _user.usuallyAreaPrice = 0;
            break;
          case 'selfAvatar':
            _user.selfAvatarPrice = 0;
            break;
        }
      },

      getOrderType() {
        var type = -1;

        // 5:录音基金订单
        // 6:喜欢的类型基金订单
        // 7:常去的地方基金订单
        // 8:暗号基金订单
        // 9最美自拍订单
        switch (this.purchaseType) {
          case 'secretSignal':
            type = 8;
            break;
          case 'likeType':
            type = 6;
            break;
          case 'usuallyArea':
            type = 7;
            break;
          case 'selfAvatar':
            type = 9;
            break;
        }
        return type;
      },

      closeDialog() {
        this.purchaseConfirmDialog = false;
      }
    },
    mounted() {
      this.getUserInfo();
    }

  }

</script>

<style lang="less" scoped>
  /*@import '../assets/less/common.less';*/

  .user-info-list {
    background-color: white;
    a {
      color: #000000;
      text-decoration: none;
    }
    &-item {
      padding: 16px 24px;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 16px;
      .moreIcon {
        width: 16px;
        height: 16px;
      }
    }
    &-item2 {
      display: flex;
      flex-direction: column;
      padding: 16px 24px;
      border-bottom: 1px solid #eee;
      &-label {
        font-size: 16px;
      }
      &-title-icon {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;
        .moreIcon {
          width: 16px;
          height: 16px;
        }
      }
      &-data {
        margin-top: 12px;
        font-size: 14px;
      }
    }
  }

  .user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #F5F22B;
    padding: 16px 0 8px 0;
    &-avatar {
      width: 72px;
      height: 72px;
      border-radius: 50%;
    }
    &-name {
      display: flex;
      align-items: center;
      margin-top: 8px;
      .name {
        font-size: 16px;
        margin-right: 8px;
      }
      .score {
        margin-left: 8px;
      }
    }
    &-data {
      margin-top: 16px;
      width: 100%;
      display: flex;
      &-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        div {
          display: flex;
          justify-content: center;
        }
      }
      &-left {
        flex: 1;
        display: flex;
        flex-direction: column;
        div {
          display: flex;
          justify-content: center;
        }
        border-right:1px solid #9c55a1;
      }
      &-amount {
        margin-top: 8px;
        color: #9c55a1;
      }
    }
  }

  .button {
    border-radius: 2px;
    width: 64px;
    background-color: #9c55a1;
    color: white;
    padding: 4px;
    text-align: center;
    font-size: 12px;
    /*min-width: 72px;*/
  }

  .selfie-list {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    .selfie-warp {
      width: 22%;
      padding-bottom: 22%;
      margin: 0.5%;
      position: relative;
      /* 关键部分 */
      /*background-image: url(../assets/test.jpg);*/
      background-repeat: no-repeat;
      background-position: center center;
      /* 指定图片自动缩放大小 */
      -webkit-background-size: cover;
      background-size: cover;
      /* 指定使用padding-box区域显示背景图片 */
      -webkit-background-origin: padding-box;
      background-origin: padding-box;
    }
  }

</style>
